import styles from "./index.module.css";
import { Layout } from "antd";
import { HL_Button, HL_Card, HL_Image } from "@components/HL";
import useStore from "@hooks/useStore";
import type { FormProps } from "antd";
import { Button, Checkbox, Form, Input } from "antd";
import useI18n from "@hooks/useI18n";
const { Content } = Layout;

type FieldType = {
  username?: string;
  password?: string;
  remember?: string;
};

const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
  console.log("Success:", values);
};

const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
  console.log("Failed:", errorInfo);
};

const Login = () => {
  const { t, i18n } = useI18n();
  const { systemStore } = useStore();

  return (
    <>
      <Content className="h-full w-full flex flex-col items-center justify-center overflow-hidden relative">
        {/* 背景动画 */}
        <div className={styles["left-ani-div"]}></div>
        <div className={styles["right-ani-div"]}></div>

        <HL_Card
          style={{
            width: 400,
          }}
        >
          <Form
            layout="vertical"
            name="basic"
            labelCol={{ span: 24 }}
            wrapperCol={{ span: 24 }}
            style={{ maxWidth: 600 }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <div className="flex items-center justify-center">
              <h1>{t("welcome")}</h1>
              <HL_Image
                src={systemStore.logo}
                preview={false}
                width={100}
              ></HL_Image>
            </div>
            <Form.Item<FieldType>
              label="Username"
              name="username"
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item<FieldType>
              label="Password"
              name="password"
              rules={[
                { required: true, message: "Please input your password!" },
              ]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item<FieldType>
              name="remember"
              valuePropName="checked"
              label={null}
            >
              <Checkbox>Remember me</Checkbox>
            </Form.Item>

            {/* <Form.Item label={null}> */}
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
            {/* </Form.Item> */}
          </Form>
        </HL_Card>
      </Content>
    </>
  );
};

export default Login;
